<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">客户管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/assign_custom' }">
          <div class="div2">分配客户</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 查询客户列表 -->
    <div class="query">
      <div class="header">
        <span>查询客户</span>
        <p @click="show3 = true" v-show="!show3">收起</p>
        <p @click="show3 = false" v-show="show3">展开</p>
      </div>
      <el-collapse-transition>
        <div class="polling" v-show="!show3">
          <el-form
            :inline="true"
            ref="form"
            :model="queryForm"
            label-width=""
            size="mini"
          >
            <el-form-item label="信息">
              <el-input
                placeholder="请输入客户手机号码"
                v-model="queryForm.info"
              ></el-input>
            </el-form-item>
            <div class="selectDate">
              <span>时间</span>
              <div class="picker">
                <el-date-picker
                  v-model="date"
                  unlink-panels
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy- MM- dd"
                  value-format="yyyy-MM-dd"
                  @input="immediUpdate"
                >
                </el-date-picker>
              </div>
            </div>
            <el-form-item label="入线方式">
              <el-select
                v-model="queryForm.Incoming"
                placeholder="选择入线方式"
                clearable
                filterable
                :default-first-option="true"
              >
                <el-option
                  v-for="items in line"
                  :key="items.id"
                  :label="items.name"
                  :value="items.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客服">
              <el-select
                v-model="queryForm.service"
                placeholder="请选择客服"
                filterable
                clearable
                :default-first-option="true"
              >
                <el-option
                  v-for="items in customer"
                  :key="items.id"
                  :label="items.reallyName"
                  :value="items.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户等级">
              <el-select
                v-model="queryForm.category"
                placeholder="请选择客户等级"
                clearable
                filterable
                :default-first-option="true"
              >
                <el-option
                  v-for="items in rank"
                  :key="items.dictId"
                  :label="items.dictName"
                  :value="items.dictId"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="部门选择">
              <el-cascader
                v-model="queryForm.orgName"
                :options="options"
                :props="{
                  checkStrictly: true,
                  label: 'orgName',
                  value: 'orgCode',
                  children: 'children',
                }"
                clearable
                filterable
              ></el-cascader>
            </el-form-item>

            <el-form-item label="地区">
              <levelAddr
                class="addressContent"
                :province="queryForm.province"
                :city="queryForm.city"
                :area="queryForm.area"
                @updateprovice="getProvince"
                @updatecity="getCity"
                @updatearea="getArea"
              ></levelAddr>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchEvent()">搜索</el-button>
              <el-button plain @click="reset">重置</el-button>
              <!-- <el-button type="primary">导出数据</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-transition>
    </div>
    <!-- 查询客户列表 -->
    <!-- 分配用户列表 -->
    <div class="table">
      <el-button
        type="primary"
        style="margin-bottom: 10px"
        v-if="parArray.indexOf('addCustomerCode') != -1"
        @click="addCustomer"
        >添加客户</el-button
      >
      <vxe-table align="center" :data="tableData.list" style="width: 100%">
        <vxe-table-column type="seq" title="序号" width="50"></vxe-table-column>
        <vxe-table-column title="姓名" min-width="100">
          <template slot-scope="scope">
            <p class="nameClick" @click="toInformation(scope.row)">
              {{ scope.row.userName }}
            </p>
          </template>
        </vxe-table-column>
        <vxe-table-column field="phone" title="手机号码" min-width="120">
          <template slot-scope="scope">
            <p v-if="is_null(scope.row.phoneTwo)">{{ scope.row.phone }}</p>
            <div v-else>
              <div>{{ scope.row.phone }}</div>
              <div>{{ scope.row.phoneTwo }}</div>
            </div>
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="address"
          title="地址"
          show-overflow
          min-width="180"
        ></vxe-table-column>
        <vxe-table-column title="客户等级" min-width="100">
          <template slot-scope="scope">
            <p v-if="is_null(scope.row.userLevel)">--</p>
            <p v-else>{{ scope.row.userLevel }}</p>
          </template>
        </vxe-table-column>

        <vxe-table-column
          field="userLevel"
          title="客户等级/意向"
          min-width="120"
        >
          <template slot-scope="scope">
            <p v-if="is_null(scope.row.userLevel)">--</p>
            <p v-else>{{ scope.row.userLevel }}</p>

            <span v-if="is_null(scope.row.userIntention)">--</span>
            <span v-else>{{ scope.row.userIntention }}</span>
          </template>
        </vxe-table-column>

        <!-- <el-table-column prop="userIntention" label="类型">	</el-table-column> -->
        <vxe-table-column
          field="customerName"
          title="客服人员"
          min-width="110"
        ></vxe-table-column>
        <vxe-table-column
          field="ditchTime"
          title="入线渠道/时间"
          show-overflow
          min-width="120"
        >
          <template slot-scope="scope">
            <p v-if="is_null(scope.row.userDitch)">--</p>
            <p v-else>{{ scope.row.userDitch }}</p>

            <p v-if="is_null(scope.row.ditchTime)">--</p>
            <p v-else>{{ scope.row.ditchTime }}</p>
          </template>
        </vxe-table-column>
        <vxe-table-column title="操作" min-width="220" fixed="right">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="添加订单"
              placement="top-start"
            >
              <p
                class="operation"
                v-if="parArray.indexOf('mcAddorderAssign') != -1"
                @click="toAddOrder(scope.row)"
              >
                <span>添单</span>
              </p>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top-start"
            >
              <p
                class="operation"
                v-if="parArray.indexOf('btnEditCodeAssign') != -1"
                @click="toInformation(scope.row)"
              >
                <!-- <img src="../../assets/edit.png" alt=""></p> -->
                <span>编辑</span>
              </p>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="收货地址"
              placement="top-start"
            >
              <p
                class="operation"
                v-if="parArray.indexOf('mcAddressAssign') != -1"
                @click="toAddress(scope.row)"
              >
                <!-- <img style='width:21px;'src="../../assets/address.png" alt=""></p> -->
                <span>地址</span>
              </p>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="历史订单记录"
              placement="top-start"
            >
              <p
                class="operation"
                v-if="parArray.indexOf('mcOrderAssign') != -1"
                @click="tolist(scope.row)"
              >
                <!-- <img style='width:21px;'  src="../../assets/order.png" alt=""> -->
                <span>历史</span>
              </p>
            </el-tooltip>

            <!-- 			<p class="operation">
							<el-button type="primary" v-if='parArray.indexOf("mcAddorderAssign")!=-1' @click='toAddOrder(scope.row)'>添加订单</el-button>
						</p> -->
          </template>
        </vxe-table-column>
      </vxe-table>

      <!-- 分页start -->
      <div class="page" v-if="tableData.totalNum > 0">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.totalNum"
            prev-text="上一页"
            next-text="下一页"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 分页end -->
    </div>
    <!-- 分配用户列表 -->
  </div>
</template>

<script>
import levelAddr from "@/components/levelAddr";
export default {
  components: {
    levelAddr,
  },
  data () {
    return {
      show3: false,
      queryForm: {
        info: "",
        Incoming: "",
        date2: "",
        service: "",
        category: "",
        province: "",
        city: "",
        area: "",
        type: [],
        orgName: "",
      },
      date: "",
      tableData: [],
      currentPage1: 1,
      pageSize: 10,
      line: [],
      rank: [],
      customer: [],
      limits: "",
      parArray: [],
      options: [],
      height: "500px",
    };
  },
  // mounted() {
  // 	let self = this;
  // 	let ph = document.documentElement.clientHeight;
  // 	self.height = ph - (280 + document.getElementsByClassName("el-form")[0].clientHeight) + "px";
  // 	window.onresize = function() {
  // 		let ph = document.documentElement.clientHeight;
  // 		self.height = ph - (280 + document.getElementsByClassName("el-form")[0].clientHeight) + "px";
  // 	};
  // },
  created () {
    this.listAxios(1);
    this.commentAxios();
    this.customerlist();
    this.department();
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "assignCustomCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断
    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.searchEvent();
      }
    };
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null;
    next();
  },
  activated () {
    // this.listAxios(1);
    // this.commentAxios();
    // this.customerlist();
  },
  methods: {
    immediUpdate (e) {
      this.$nextTick(() => {
        if (e == null) {
          this.beginTime = "";
          this.endTime = "";
        } else {
          this.$set(this, "date", [e[0], e[1]]);
        }
      });
    },

    listAxios (pageNo) {
      let beginTime = "";
      let endTime = "";
      if (!this.is_null(this.date)) {
        beginTime = this.date[0] + " 00:00:00";
        endTime = this.date[1] + " 23:59:59";
      }
      this.axios
        .post("/order/comm/customeruser/list", {
          address:
            this.queryForm.province + this.queryForm.city + this.queryForm.area,
          customerId: sessionStorage.getItem("user_id"),
          pageNo: this.currentPage1,
          pageSize: this.pageSize,
          keyWord: this.queryForm.info,
          phone: "",
          userDitch: this.queryForm.Incoming,
          userIntention: "",
          userLevel: this.queryForm.category,
          type: 2,
          endTime: endTime,
          startTime: beginTime,
          userType: "",
          userType: this.queryForm.orgName[this.queryForm.orgName.length - 1],
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.tableData = res.data;
          }
        });
    },
    reset: _.debounce(function () {
      this.queryForm = {
        info: "",
        Incoming: "",
        service: "",
        category: "",
        province: "",
        city: "",
        area: "",
        type: [],
        clientType: "1",
        orgName: "",
      };
      this.date = "";
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.listAxios(1);
    }, 300),
    toAddOrder (row) {
      this.$router.push({
        name: "add_order",
        query: {
          userId: row.id,
        },
      });
      sessionStorage.removeItem("goodsList");
      sessionStorage.removeItem("giftList");
    },
    // 客户下拉框数据
    customerlist () {
      this.axios
        .get(
          "/sys/v1/user/employee/by/sales/authority?salesAuthorityId=" +
          JSON.parse(sessionStorage.getItem("salesAuthorityId").split(",")),
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.customer = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 部门选择列表
    department () {
      this.axios
        .post(
          "/sys/v1/org/tree/select",
          {
            request: {
              orgName: "",
              orgType: "",
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.options = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    getProvince (val) {
      this.queryForm.province = val;
      if (!val) {
        this.queryForm.city = "";
        this.queryForm.area = "";
      }
    },
    getCity (val) {
      this.queryForm.city = val;
    },
    getArea (val) {
      this.queryForm.area = val;
    },
    //** 普通数据请求 **//
    commentAxios () {
      //入线方式
      this.axios
        .get("/order/comm/customeruser/selectCustomerditch", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res)
          if (res.code == 0) {
            this.line = res.data;
          } else {
            this.$message.error(res.message);
          }
        });

      /*等级*/
      this.axios
        .get("/sys/v1/common/by/group?groupId=" + "customer_level", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res)
          if (res.code == 0) {
            this.rank = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //** 普通数据请求 **//

    // 分页
    handleCurrentChange (val) {
      this.currentPage1 = val;
      this.listAxios();
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.listAxios();
    },
    // 跳转客户资料 addCustomer
    toInformation (row) {
      this.$router.push({
        name: "customerInformation",
        query: {
          id: row.id,
          navName: 2,
        },
      });
    },
    // 跳转地址
    toAddress (row) {
      this.$router.push({
        name: "addressList",
        query: {
          id: row.id,
        },
      });
    },
    tolist (row) {
      this.$router.push({
        name: "customerListOrder",
        query: {
          id: row.id,
        },
      }); //userId就是用户id
    },
    //** 模糊查询数据 **//
    searchEvent () {
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.listAxios("1");
    },
    is_null (content) {
      if (
        content + "" != "" &&
        content + "" != "undefined" &&
        content + "" != "null" &&
        content + "" != "请选择"
      ) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}

.table {
  margin-top: 10px;
  margin-bottom: 40px;
}

/deep/.vxe-cell--title {
  color: #2d7edf;
}

/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

.query {
  background: #fff;
  padding: 10px;

  .el-form-item {
    display: inline-block;
    margin-right: 20px;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  span {
    font-size: 15px;
    // color: #2d7edf;
    padding-bottom: 10px;
  }
  p {
    font-size: 12px;
    color: #2d7edf;
  }
  p:hover {
    cursor: pointer;
  }
}

/deep/ .query .el-input__inner {
  width: 180px;
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

.operation {
  float: left;
  margin-left: 20px;

  img {
    width: 25px;
    height: 25px;
  }
}
.operation:hover {
  cursor: pointer;
}
.table {
  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }

  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }

  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }

  /deep/.el-button {
    padding: 0px;
    height: 30px;
    width: 80px;
  }
}

.page {
  // margin: 10px 0;
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
</style>
